This forum is closed to new posts and responses. Individual names altered for privacy purposes. The information contained in this website is provided for informational purposes only and should not be construed as a forum for customer support requests. Any customer support requests should be directed to the official HCL customer support channels below:

HCL Software Customer Support Portal for U.S. Federal Government clients
HCL Software Customer Support Portal



Apr 25, 2011, 12:17 AM
22 Posts
topic has been resolvedResolved

Two dialogs initiated from single page - Would like to style them differently

  • Category: Dojo and Client Side JavaScript
  • Platform: All
  • Release: 8.5.2
  • Role: Developer
  • Tags: Dijit Dialog CSS
  • Replies: 2
I have a single XPage which displays two different dijit dialogs based on user selection (clicking a hotspot).
The server default "tundra" stylesheet is referenced, and the dialog boxes appear fine. 
 
However, I would like to style the dialog boxes differently. 
For instance, I would like the background of one dialog box to be one color, and different for the other.
 
A little research and playing with Firefox shows that I simply needed to change the CSS associated with ".tundra .dijitDialog .dijitDialogPaneContent".
That said, I created a small stylesheet and tried it out - Worked perfectly.
 
However, that stylesheet is associated with the XPage. That implies that the style will be applied to BOTH of the dialog boxes.
Is there any way I can differentiate the dialogs from one another when initiated from the same XPage (i.e. apply a unique class to each)? 
 
Any advice would be greatly appreciated! 
 
T. 
Apr 25, 2011, 6:32 AM
261 Posts
Re: Two dialogs initiated from single page - Would like to style them differently
The exact solution depends on how the dialogs are constructed, but what I would do is to add an extra class to one or both of the dialogs and add that class to the CSS file with the correct background color. Depending on the order the CSS files are loaded you might have to add the !important declaration to the background color definition.
 
Adding the extra class can be accomplished using the dojo.addClass method.

Mark
Apr 26, 2011, 12:46 PM
22 Posts
Brilliant Mark - Worked perfectly!
Thanks very much - The addition of the class allowed me to distinguish one dialog from the other and apply different styles.
 
Thanks again!! 

This forum is closed to new posts and responses. Individual names altered for privacy purposes. The information contained in this website is provided for informational purposes only and should not be construed as a forum for customer support requests. Any customer support requests should be directed to the official HCL customer support channels below:

HCL Software Customer Support Portal for U.S. Federal Government clients
HCL Software Customer Support Portal